<template>
       <div class="aside">
       	<!--
       		首先实现第一个效果，点击字母实现跳转且跳转到相关内容
            子组件之间的传值过程是：先将原组件传值给父组件，再由父组件传递到目标组件 
                                                       原组件---》父组件---》目标组件
       	-->
           <ul class="aside-list">
             <li
               v-for="item in letters"
               @click='cityClick'
               :ref='item'
               :key="item"
               @touchstart="handleTouchStart"
               @touchmove="handleTouchMove"
               @touchend="handleTouchEnd"
             >{{item}}</li>
           </ul>
       </div>
</template>

<script>

  /*
  * 效果：点击字母跳转到指定页面
  *
  * */
    export default {
        name: "Aside",
        props: {
           cities: Object
        },
        data () {
            return {
               touchStatus: false, //默认是不允许滑动
               startY: 0,
               timer: null
            }
        },
        computed : {
           letters () {//将aside对象转为数组 方便传值
               const letters = [];
               for(let i in this.cities){
                   letters.push(i);
               }
               return letters;
           }
        },
        updated () {//生命周期函数
        	   this.startY = this.$refs['A'][0].offsetTop//获取触摸点距外侧最div
        },
        methods: {
          cityClick (e) {//给目标元素绑定点击事件，通过$emit向外出发事件，并且将参数(value)传递到父组件中(携值传递)
                this.$emit('change',e.target.innerText);
          },
          handleTouchStart () {//手指按下
                this.touchStatus = true
          },
          handleTouchMove (e) {//手指滑动
          	   if(this.timer){
          	   	  clearTimeout(this.timer);
          	   }
               this.timer = setTimeout(()=>{
               	 if(this.touchStatus){
                	 const touchY = e.touches[0].clientY-76;//获取当前触摸点距顶部的距离
                     const index = Math.floor((touchY - this.startY)/20);
                     if(index >= 0 && index<this.letters.length){
                 	     this.$emit('change',this.letters[index]);
                     }
                 }
               },16);
          },
          handleTouchEnd () {//手指抬起
               this.touchStafalse = false
          }
        }
    }
</script>

<style lang="stylus" scoped>
   .aside-list
      width : .2rem
      background : azure
      position : absolute
      top : .76rem
      right : 0
      bottom : 0
      display : flex
      flex-direction : column
      text-align: center
      justify-content : center
      font-size .16rem
      color : #00bcd4
      li{
         height .25rem
      }
</style>
